<!--
  @Descripttion:招聘统计页面
  @Author：yejianbo
  @Date：2022年05月08日 22:50:42
-->
<template>
  <div>
    <el-card shadow="always" style="margin-bottom: 20px;">
      <p class="ansy-title">招聘职位</p>
      <el-row type="flex" class="row-bg" justify="space-between">
        <div>
          <el-date-picker
            v-model="dateValue"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="small"
            style="margin-right:10px;"
            @change="dateChange"
          />
          <el-button
            type="primary"
            plain
            size="mini"
            style="margin-right:10px;"
            @click="viewByTime('week')"
          >只看本周</el-button>
          <el-button
            type="primary"
            plain
            size="mini"
            style="margin-right:10px;"
            @click="viewByTime('month')"
          >只看本月</el-button>
          <el-button
            type="primary"
            plain
            size="mini"
            style="margin-right:10px;"
            @click="init"
          >查询</el-button>
          <el-button
            plain
            size="mini"
            style="margin-right:10px;"
            @click="reset"
          >重置</el-button>
          <el-checkbox
            v-if="isSuperAdmin"
            v-model="isRemoveFakeData"
            style="margin-left: 10px"
            @change="fakeDataChange"
          >剔除系统日增流量</el-checkbox>
        </div>
        <div v-if="isSuperAdmin">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            style="margin-right:10px;"
            @click="openAddDataDialog"
          >设置日增流量</el-button>
          <el-switch
            v-model="dayFlowBtn"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="settingDataBtnChange"
          />
        </div>
      </el-row>
      <el-row :gutter="32" style="padding-top: 20px;margin-bottom: 20px;">
        <el-col :span="3">
          <div class="item-title">
            招聘职位总数
            <el-tooltip
              class="item"
              effect="dark"
              content="所选时间范围内，当前系统新增多少职位（包含已发布、未发布）"
              placement="top"
            >
              <i class="icon-font el-icon-warning-outline" />
            </el-tooltip>
          </div>
          <div class="count-num">{{ jobDataCount.jobCount }}</div>
        </el-col>
        <el-col :span="3">
          <div class="item-title">
            职位浏览数
            <el-tooltip
              class="item"
              effect="dark"
              content="所选时间范围内，当前系统发布中职位，多少学生浏览"
              placement="top"
            >
              <i class="icon-font el-icon-warning-outline" />
            </el-tooltip>
          </div>
          <div class="count-num">{{ jobDataCount.clickNum }}</div>
        </el-col>
        <el-col :span="3">
          <div class="item-title">
            在招职位
            <el-tooltip
              class="item"
              effect="dark"
              content="所选时间范围内，当前系统发布中职位数"
              placement="top"
            >
              <i class="icon-font el-icon-warning-outline" />
            </el-tooltip>
          </div>
          <div class="count-num">{{ jobDataCount.actionJobCount }}</div>
        </el-col>
        <el-col :span="3">
          <div class="item-title">
            投递简历数
            <el-tooltip
              class="item"
              effect="dark"
              content="所选时间范围内，当前系统发布中职位，收到多少份简历"
              placement="top"
            >
              <i class="icon-font el-icon-warning-outline" />
            </el-tooltip>
          </div>
          <div class="count-num">{{ jobDataCount.postNum }}</div>
        </el-col>
        <el-col :span="3">
          <div class="item-title">
            发送邀约数
            <el-tooltip
              class="item"
              effect="dark"
              content="所选时间范围内，当前系统发布中职位，收到简历后，发送的面试邀约数（单个学生收到多个职位邀约算多次，单个职位重复邀约算1次）"
              placement="top"
            >
              <i class="icon-font el-icon-warning-outline" />
            </el-tooltip>
          </div>
          <div class="count-num">{{ jobDataCount.invitCount }}</div>
        </el-col>
        <el-col :span="3">
          <div class="item-title">
            确认邀约数
            <el-tooltip
              class="item"
              effect="dark"
              content="所选时间范围内，当前系统发布中职位，学生投递简历后，收到面试邀约，多少学生确认邀约（单个学生收到多个职位邀约算多次，单个职位重复邀约算1次）"
              placement="top"
            >
              <i class="icon-font el-icon-warning-outline" />
            </el-tooltip>
          </div>
          <div class="count-num">{{ jobDataCount.invitedCount }}</div>
        </el-col>
        <el-col :span="3">
          <div class="item-title">
            应邀率
            <el-tooltip
              class="item"
              effect="dark"
              content="确认邀约数/发送邀约数*100%"
              placement="top"
            >
              <i class="icon-font el-icon-warning-outline" />
            </el-tooltip>
          </div>
          <div class="count-num">{{ jobDataCount.ratio }}%</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-card shadow="always">
            <p class="ansy-title no-margin">职位地区分布</p>
            <pie-chart ref="jobPie" />
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <!-- 设置单个职位日新增流量 -->
    <el-dialog
      title="设置单个职位日新增流量"
      :visible.sync="dataDialog"
      width="440px"
    >
      <el-form
        ref="configForm"
        :model="configForm"
        :rules="rules"
        label-width="80px"
      >
        <p>开关</p>
        <el-form-item label="" prop="dayFlow">
          <el-radio-group v-model="configForm.dayFlow">
            <el-radio label="1">开启</el-radio>
            <el-radio label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 职位状态 jobHireStatus (string)：0 未发布，1 待审核，2 发布中，3 暂停发布, 4 驳回 -->
        <p>日增阈值</p>
        <el-form-item label="最低量" prop="flowMin">
          <el-input v-model.number="configForm.flowMin" />
        </el-form-item>
        <el-form-item label="最高量" prop="flowMax">
          <el-input v-model.number="configForm.flowMax" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dataDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitSetting">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getJobAndinvitCountNew,
  getDayFlowInfo,
  updateDayFlowInfo
} from '@/api/company-admin-api/hireManage/index.js'
import moment from 'moment'
import PieChart from '../PieChart'

import {
  getDistribution
} from '@/api/school-admin-api/platform/index.js'
export default {
  name: 'HireAnalytics',
  components: {
    PieChart
  },
  data() {
    return {
      configForm: {
        dayFlow: '1', // 设置日增流量开关(1:开启,0:关闭)
        flowMin: '', // 日增阈值-最低值
        flowMax: '' // 日增阈值-最高值
      },
      // 原始数据
      originConfig: {
        dayFlow: '1', // 设置日增流量开关(1:开启,0:关闭)
        flowMin: '', // 日增阈值-最低值
        flowMax: '' // 日增阈值-最高值
      },
      dayFlowBtn: false, // 设置日增流量开关
      rules: {
        dayFlow: [
          {
            required: true,
            message: '开关必须选择',
            trigger: 'change'
          }
        ],
        flowMin: [
          {
            required: true,
            message: '最小值不能为空',
            trigger: 'blur'
          }
        ],
        flowMax: [
          {
            required: true,
            message: '最大值不能为空',
            trigger: 'blur'
          }
        ]
      },
      isRemoveFakeData: true, // 剔除系统日增流量开关
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近30天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近90天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      dateValue: null,
      activiteCompanyRank: [],
      // 面试反馈数据
      hireFullback: [
        {
          all: 0,
          pass: 0,
          ratio: '0'
        }
      ],
      jobDataCount: {
        actionJobCount: 0,
        feedbackCount: 0,
        invitCount: 0,
        invitedCount: 0,
        jobCount: 0,
        passCount: 0,
        clickNum: 0,
        postNum: 0,
        ratio: 0
      },
      // 招聘职位查询参数
      jobQueryParams: {
        startDate: '', // 开始时间(type==1时传)，选填
        endDate: '', // 结束时间(type==1时传)，选填
        dayFlowFlag: '0', // 是否剔除日增流量(1:剔除,0:不剔除)，必填 ,超级管理员默认1，普通运营默认0
        type: 0 // 查询类型,0:默认(不传时间),1:时间间隔,2:本周,3:本月，必填
      },
      dataDialog: false
    }
  },
  computed: {
    ...mapGetters(['roles']),
    isSuperAdmin() {
      return (
        Array.isArray(this.roles) && this.roles.indexOf('super_admin') > -1
      )
    }
  },
  created() {
    this.init()
  },
  methods: {
    // 快捷查看本周、本月
    viewByTime(type) {
      let startDate, endDate
      if (type === 'week') {
        startDate = moment().startOf('week').add(1, 'day').format('YYYY-MM-DD')
        endDate = moment().format('YYYY-MM-DD')
        this.jobQueryParams.startDate = startDate
        this.jobQueryParams.endDate = endDate
        this.jobQueryParams.type = 2
      } else {
        startDate = moment().startOf('month').format('yyyy-MM-DD')
        endDate = moment().format('yyyy-MM-DD')
        this.jobQueryParams.startDate = startDate
        this.jobQueryParams.endDate = endDate
        this.jobQueryParams.type = 3
      }
      this.$set(this, 'dateValue', [startDate, endDate])
    },
    // 提交日增数据
    submitSetting() {
      this.$refs.configForm.validate((boo) => {
        if (boo) {
          const parmas = {}
          Object.keys(this.configForm).map(key => {
            parmas[key] = this.configForm[key] + ''
          })
          this.updateConfigData(parmas)
        }
      })
    },
    // 打开日增数据弹窗
    openAddDataDialog() {
      this.dataDialog = true
    },
    settingDataBtnChange(data) {
      const parmas = {}
      Object.keys(this.originConfig).map(key => {
        parmas[key] = this.originConfig[key] + ''
      })
      parmas.dayFlow = data ? '1' : '0'
      this.updateConfigData(parmas)
    },
    updateConfigData(parmas) {
      updateDayFlowInfo(parmas).then(res => {
        if (res && res.data) {
          this.$message.success('设置成功')
          this.getDayFlowInfo() // 刷新数据
          this.dataDialog = false
        } else {
          this.dayFlowBtn = this.originConfig.dayFlow === '1'
        }
      }).catch(() => {
        this.dayFlowBtn = this.originConfig.dayFlow === '1'
      })
    },
    // 剔除日增假流量的开关，展示真实数据
    fakeDataChange(data) {
      this.jobQueryParams.dayFlowFlag = data ? 1 : 0
      this.init()
    },
    dateChange(data) {
      if (Array.isArray(data) && data.length === 2) {
        this.jobQueryParams.startDate = data[0]
        this.jobQueryParams.endDate = data[1]
        this.jobQueryParams.type = 1
      } else {
        this.jobQueryParams.startDate = ''
        this.jobQueryParams.endDate = ''
        this.jobQueryParams.type = 0
      }
    },
    reset() {
      this.jobQueryParams = this.$options.data().jobQueryParams
      this.isRemoveFakeData = true
      this.dateValue = null
      this.init()
    },
    init() {
      if (this.isSuperAdmin) {
        this.jobQueryParams.dayFlowFlag = '1'
        this.getDayFlowInfo()
      }
      this.getJobAndinvitCount()
      this.getDistribution()
    },
    // 招聘情况统计
    getJobAndinvitCount() {
      const params = Object.assign({}, this.jobQueryParams)
      for (const key in params) {
        if (params[key] === '' || params[key] === null) {
          delete params[key]
        }
      }
      if (params.startDate && params.endDate) {
        params.startDate += ' 00:00:00'
        params.endDate += ' 23:59:59'
      }
      // 查询类型,0:默认(不传时间),1:时间间隔,2:本周,3:本月，必填
      if (params.type === 0) {
        delete params.startDate
        delete params.endDate
      }
      getJobAndinvitCountNew(params).then((res) => {
        if (res.code === 0 && res.data) {
          Object.assign(this.jobDataCount, res.data)
          this.jobDataCount.ratio = res.data.invitCount > 0 && res.data.invitedCount > 0
            ? (
              Number(
                (res.data.invitedCount * 100) / (res.data.invitCount * 100)
              ) * 100
            ).toFixed(2)
            : 0
          this.hireFullback[0].all = res.data.invitCount
          this.hireFullback[0].pass = res.data.passCount
          this.hireFullback[0].ratio =
              res.data.invitCount > 0 && res.data.passCount > 0
                ? (
                  Number(
                    (res.data.passCount * 100) / (res.data.invitCount * 100)
                  ) * 100
                ).toFixed(2) + '%'
                : 0
        }
      })
    },
    // 职位、学生分布情况
    getDistribution() {
      const params = Object.assign({}, this.jobQueryParams)
      for (const key in params) {
        if (params[key] === '' || params[key] === null) {
          delete params[key]
        }
      }
      if (params.startDate && params.endDate) {
        params.startDate += ' 00:00:00'
        params.endDate += ' 23:59:59'
      }
      getDistribution(params).then((res) => {
        if (res.code === 0 && res.data) {
          const jobDistribution = res?.data?.jobDistribution.map((item) => {
            try {
              const city = JSON.parse(item.city) || []
              if (Array.isArray(city)) {
                item.city = city[city.length - 1]
              }
              return item
            } catch (error) {
              item.city = '--'
              return item
            }
          })
          this.$refs.jobPie && this.$refs.jobPie.initChart(jobDistribution)
        }
      })
    },
    // 获取日增流量信息
    getDayFlowInfo() {
      getDayFlowInfo().then(res => {
        if (res && res.data) {
          const { dayFlow } = res.data
          this.dayFlowBtn = dayFlow === '1'
          Object.assign(this.configForm, res.data)
          Object.assign(this.originConfig, res.data)
        }
      })
    }
  }
}
</script>

  <style lang="scss" scoped>
  @import "@/assets/styles/vars.scss";
  .blue06 {
    color: $blue06;
  }
  .ansy-title {
    @include t14h22;
    font-weight: 600;
  }
  .m14 {
    margin-bottom: 14px;
  }
  .no-margin {
    margin: 0;
  }
  .item-title {
    @include t12h20;
  }
  .count-num {
    font-size: 22px;
    color: $blue06;
    line-height: 30px;
    span {
      color: #000;
      @include t12h20;
    }
  }
  .count-data {
    font-size: 12px;
    margin: 0;
    color: $blue06;
    font-weight: 600;
  }
  .greed {
    color: $green04;
  }
  .dashboard-editor-container {
    padding: 14px;
    background-color: rgb(240, 242, 245);
    position: relative;
    height: 100%;
    .chart-wrapper {
      background: #fff;
      padding: 14px 14px 0;
      margin-bottom: 14px;
    }
  }

  @media (flowMax-width: 1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
  </style>

